<template>
    <div>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="货主单位：" style="width: 380px;">
      <el-input v-model="form.settlementChargeConsignorUnit" placeholder="请输入货主单位" clearable />
    </el-form-item>
     <el-form-item label="结算方式：" style="width: 280px;">
      <el-select
        v-model="form.settlementChargeBillingmethod"
        placeholder="请选择结算方式"
        clearable
        style="width: 180px;"
      >
      
        <el-option label="微信支付" :value="0" />
        <el-option label="支付宝支付" :value="10" />
        <el-option label="银联支付" :value="20" />
        <el-option label="企业转账" :value="30" />
        <el-option label="线下支付" :value="40" />
        <el-option label="其它" :value="50" />
      </el-select>
    </el-form-item>
    <el-form-item label="核对状态：">
      <el-select
        v-model="form.settlementStatus"
        placeholder="请选择状态"
        clearable
        style="width: 180px;"
      >
        <el-option label="已核对" :value="1" />
        <el-option label="未核对" :value="2" />
      </el-select>
    </el-form-item>
    <br/>
    <el-form-item label="经办人：" style="width: 380px;">
      <el-input v-model="form.settlementChargeAttn" placeholder="请输入经办人" clearable />
    </el-form-item>
    <el-form-item label="业务日期：">
      <el-date-picker
        v-model="form.settlementChargeDateBusiness"
        type="date"
        placeholder="请选择日期"
        clearable
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSettlementsList">查询</el-button>
    </el-form-item>
  </el-form>
        <el-button type="primary" size="default" @click="Add">新增</el-button>
        <el-button type="danger" @click="batchDelete()">批量删除</el-button>
        <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange">
             <el-table-column type="selection"  width="55"  />
            <el-table-column prop="settlementChargeNumber" label="业务单号" width="center" />
            <el-table-column prop="settlementChargeConsignorUnit" label="货主单位" width="center" />
            <el-table-column prop="settlementChargeBillingmethod" label="结算方式" width="center" >
                <template v-slot="scope">
                    <el-tag v-if="scope.row.settlementChargeBillingmethod === 0" type="success">微信支付</el-tag>
                    <el-tag v-else-if="scope.row.settlementChargeBillingmethod === 10" type="danger">支付宝支付</el-tag>
                    <el-tag v-else-if="scope.row.settlementChargeBillingmethod === 20" type="warning">银联支付</el-tag>
                    <el-tag v-else-if="scope.row.settlementChargeBillingmethod === 30" type="info">企业转账</el-tag>
                    <el-tag v-else-if="scope.row.settlementChargeBillingmethod === 40" type="primary">线下支付</el-tag>
                    <el-tag v-else type="danger">其它</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="settlementChargeTonnage" label="吨位（立方米）" width="center" />
            <el-table-column prop="settlementChargeUnit" label="单价（元/立方米）" width="center" />
            <el-table-column prop="settlementChargeMoney" label="金额（元）" width="center" />
            <el-table-column prop="settlementChargeDateBusiness" label="业务日期" width="center" >
                <template v-slot="scope">
                    <span v-if="scope.row.settlementChargeDateBusiness!=null">{{scope.row.settlementChargeDateBusiness.substring(0, 10)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="settlementChargeAttn" label="经办人" width="center" />
            <el-table-column prop="createDates" label="创建时间" width="center">
                <template v-slot="scope">
                    <span v-if="scope.row.createDates!=null">
                         {{ (scope.row.createDates).substring(0,10) +' '+ (scope.row.createDates).substring(11,16) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="settlementRemark" label="备注" width="center" />
            <el-table-column prop="invoiceRemark" label="核对状态" width="center" >
                <template v-slot="scope">
                    <el-tag v-if="scope.row.settlementStatus === 1" type="success">已核对</el-tag>
                    <el-tag v-else-if="scope.row.settlementStatus === 0" type="warning">未核对</el-tag>
                    <el-tag v-else type="danger">未核对</el-tag>
                </template>
            </el-table-column>
             <el-table-column prop="updateNames" label="修改人" width="center" />
            <el-table-column prop="updateDates" label="修改时间" width="center">
                <template v-slot="scope">
                    <span v-if="scope.row.updateDates!=null">
                         {{ (scope.row.updateDates).substring(0,10) +' '+ (scope.row.updateDates).substring(11,16) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="210">
                <template v-slot="scope">
                    <el-button type="primary" link @click="upd(scope.row.settlementChargeId)">编辑</el-button>
                    <el-button type="primary" link @click="Del(scope.row.settlementChargeId)">删除</el-button>
                    <!-- 把编辑，删除已小图标的显示显示出来，不使用按钮显示<Delete style="width: 1em; height: 1em; margin-right: 8px" /><Search style="width: 1em; height: 1em; margin-right: 8px" /> -->
                     <el-button type="primary" link @click="check(scope.row.settlementChargeId)" v-if="scope.row.settlementStatus === 2">核对</el-button>
                     <el-button type="primary" link @click="check(scope.row.settlementChargeId)" v-else-if="scope.row.settlementStatus === 0">核对</el-button>
                    <el-button type="primary" link @click="check(scope.row.settlementChargeId)" v-else disabled>核对</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div>
        <table>
            <tr>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" layout="total, slot" prev-text="上一页"
                        next-text="下一页" :total="form.listCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        每页显示{{ form.pageSize }}条，当前第{{ form.pageIndex }}/{{ form.pageCount }}页
                    </el-pagination>
                </td>
                <td><el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" layout=" slot,prev, pager, next" prev-text="上一页"
                        next-text="下一页" :total="form.listCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" @hide-on-single-page="form.pageIndex = 1">
                        <el-button type="primary" :disabled="form.pageIndex == 1" size="small"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" layout="slot, sizes, jumper" prev-text="上一页"
                        next-text="下一页" :total="form.listCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" @hide-on-single-page="form.pageIndex = form.pageCount">
                        <el-button type="primary" :disabled="form.pageIndex == form.pageCount" size="small"
                            @click="handleCurrentChange(form.pageCount)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </table>
    </div>

    <!-- <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 5, 8, 10]"
        :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="form.listCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->

</template>
<script setup lang="ts">
import { ref, reactive, inject, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import http from '@/Http';
import axios from 'axios';
const tableData = ref([])
const router = useRouter();
const route = useRoute();

const form = reactive({
    pageIndex: 1,
    pageSize: 3,
    pageCount: 0,
    listCount: 0,
    settlementChargeConsignorUnit: '',
    settlementChargeBillingmethod: '',
    settlementStatus: '',
    settlementChargeDateBusiness: '',
    settlementChargeAttn:'',
})

//显示列表
const getSettlementsList = () => {
    console.log(form.settlementChargeDateBusiness,)
    axios.get("Settlementread/api/SettlementChargess/Get", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize,
            settlementChargeConsignorUnit: form.settlementChargeConsignorUnit,
            settlementChargeBillingmethod: form.settlementChargeBillingmethod||0,
            settlementStatus: form.settlementStatus||0,
            settlementChargeDateBusiness: form.settlementChargeDateBusiness,
            settlementChargeAttn: form.settlementChargeAttn,
        }
    })
        .then(res => {
          console.log(res.data);
          
            form.listCount = res.data.listCount
            form.pageCount = res.data.pageCount
            tableData.value = res.data.pageList;
            console.log(res.data.pageList)
        
    })
}

const check = (settlementChargeId: any) => {
    router.push("/SettlementCheck?settlementChargeId=" + settlementChargeId);
}

//修改
const upd = (settlementChargeId: any) => {
    router.push("/SettlementUpdate?settlementChargeId=" + settlementChargeId);
}

//删除
const Del = (settlementChargeId: number) => {
    ElMessageBox.confirm(
        '您确定要删除此用户吗?', // 提示信息
        '确认删除', // 标题
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 用户点击“确定”后执行删除操作
        axios.post("Settlementwrite/api/SettlementCharges/Delete?settlementChargeId=" + settlementChargeId).then(res => {
            if (res.data.data > 0) {
                ElMessage({
                    message: "删除成功",
                    type: "success"
                });
                getSettlementsList(); // 刷新用户列表
            } else {
                ElMessage({
                    message: "删除失败",
                    type: "warning"
                });
            }
        });
    }).catch(() => {
        // 用户点击“取消”后，可以选择不执行任何操作，或者显示提示
        ElMessage({
            message: "已取消删除",
            type: "info"
        });
    });
}

let settlementChargeId = ""
const handleSelectionChange = (val: any) => {
    let ids:any = []
    val.forEach((item: any) => {
        ids.push(item.settlementChargeId)
    })
    settlementChargeId = ids.join(',')
}

const batchDelete = () => {
    if (settlementChargeId == "") {
        ElMessage({
            message: "请选择要删除的用户",
            type: "warning"
        });
        return;
    }
    ElMessageBox.confirm(
        '您确定要删除这些用户吗?', // 提示信息
        '确认删除', // 标题
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        // 用户点击“确定”后执行删除操作
        axios.post("Settlementwrite/api/SettlementCharges/Delete?settlementChargeId=" + settlementChargeId)
            .then(res => {
            if (res.data.data > 0) {
                ElMessage({
                    message: "删除成功",
                    type: "success"
                });
                getSettlementsList(); // 刷新用户列表
            } else {
                ElMessage({
                    message: "删除失败",
                    type: "warning"
                });
            }
        });
    }).catch(() => {
        // 用户点击“取消”后，可以选择不执行任何操作，或者显示提示
        ElMessage({
            message: "已取消删除",
            type: "info"
        });
    });
}

const Add = () => {
    router.push("/SettlementAdd");
}

const Role = () => {
    router.push("/roleView");
}

const formatTime = (time: any) => {
    return time.replace('T', ' ').slice(0, 16); // 只保留前10位
}


const handleSizeChange = (val: number) => {
    //console.log(`${val} items per page`)
    form.pageSize = val;
    getSettlementsList();
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val;
    getSettlementsList();
}

onMounted(() => {
    getSettlementsList();
})
</script>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>